<template>
  <div id="searchView" v-loading="store.loading">
    <div class="back">
      <div class="back-content right-content" @click="$router.back()">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span>返回</span>
      </div>
      <div class="back-title">搜索词语：{{ $route.params.searchText }}</div>
    </div>
    <div v-if="!store.loading">
      <ul class="artical-list" v-if="blogList && blogList.length">
        <li class="artical-content" v-for="item in blogList" :key="item">
          <ArticalItem :item="item" type="search"></ArticalItem>
        </li>
      </ul>
      <div v-else>
        <el-empty description="暂无博客..."></el-empty>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ArticalItem from '/@/components/artical/artical-item.vue'
import { ref } from 'vue'
import { useMainStore } from '/@/store'
import { getBlogSearch } from '/@/api/api'
import { useRoute } from 'vue-router'

const route = useRoute()
const store = useMainStore()
const blogList = ref([])

// 获取博客数据
const getBlogData = async () => {
  store.setLoading(true)
  const res: any = await getBlogSearch({
    search: route.params.searchText
  }).finally(() => {
    store.setLoading(false)
  })

  if (res.code === 1) {
    blogList.value = res.data
  }
}
getBlogData()
</script>

<style lang="less" scoped></style>
